<script setup lang="ts">
import {Refresh, Search} from "@element-plus/icons-vue";
import {computed, onMounted, reactive, ref, watch} from "vue"
import {getShards} from "@/views/api/elastic.ts";
import {addShard, createShard, Shard, State, IndexShard} from "@/views/types/shards.ts";
import ShardCard from "@/views/components/ShardCard.vue";

const shards = ref<Array<Shard>>([]);
const loading = ref<boolean>(false);
const filterText = ref<string>('');
const state = ref<State>(null);
const rows = reactive<Array<Shard>>([]);
const cols = ref<number>(6);
const span =computed(()=>{
  return 24/cols.value;
})
const page = reactive({
  total: 0,
  pageNum: 1,
  pageSize: 18
});
watch(filterText, () => {
  query4Num(1);
})
watch(state, () => {
  query4Num(1);
})
const rebuild = (array:Array<IndexShard>):Array<Shard> =>{
  if(array && array.length > 0){
    const result:Map<string,Shard>=new Map();
    array.forEach(item=>{
      let shard = result.get(item.index);
      if(!shard){
        result.set(item.index,createShard(item))
      }else{
        addShard(shard,item);
      }
    })
    return Array.from(result.values()).sort((a,b)=>a.index.localeCompare(b.index));
  }
}
const query = () => {
  loading.value = true;
  shards.value=[];
  getShards().then(data => {
    if (data && data.length > 0) {
      shards.value=rebuild(data);
      buildPage();
    }
  }).finally(() => {
    loading.value = false;
  })
}

const buildPage = () => {
  rows.splice(0, rows.length);
  let start = (page.pageNum - 1) * page.pageSize;
  let end = page.pageNum * page.pageSize;
  let result=shards.value;
  if (filterText.value) {
    result = shards.value.filter(data => data.index.toLowerCase().indexOf(filterText.value.toLowerCase()) > -1);
  }
  if (state.value) {
    result = shards.value.filter(data => data.types.filter(t=>t.state===state.value).length>0);
  }
  page.total = result.length;
  rows.push(...result.slice(start, end));
}
const query4Size = (pageSize) => {
  page.pageSize = pageSize;
  buildPage();
}

const query4Num = (pageNum) => {
  page.pageNum = pageNum;
  buildPage();
}

onMounted(() => {
  query();
})
</script>

<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>分片</span>
          <div style="display: flex">
            <el-button :icon="Refresh" text @click="query"></el-button>
            <el-select v-model="state" clearable style="width: 100px;margin-right: 5px">
              <el-option label="已启动" value="STARTED"></el-option>
              <el-option label="迁移中" value="RELOCATING"></el-option>
              <el-option label="初始化" value="INITIALIZING"></el-option>
              <el-option label="未分配" value="UNASSIGNED"></el-option>
            </el-select>
            <el-input v-model="filterText" placeholder="过滤..." :icon="Search" style="width: 220px" clearable></el-input>
          </div>
        </div>
      </template>
      <div v-loading="loading">
        <div style="height:calc(100vh - 280px);overflow:auto;">
          <el-row>
            <template v-for="shard in rows">
              <el-col :span="span">
                <ShardCard :shard="shard" :detail="false"></ShardCard>
              </el-col>
            </template>
          </el-row>
        </div>
        <div class="pagination" style="display: flex;justify-content: space-between;">
          <div>
            <el-select v-model="cols" style="width: 80px;--el-border-color: #00000000;">
              <el-option label="1" :value="1"></el-option>
              <el-option label="2" :value="2"></el-option>
              <el-option label="3" :value="3"></el-option>
              <el-option label="4" :value="4"></el-option>
              <el-option label="6" :value="6"></el-option>
              <el-option label="8" :value="8"></el-option>
            </el-select>
          </div>
          <el-pagination
              :current-page="page.pageNum"
              :page-sizes="[18, 24, 30, 36, 42]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="page.total"
              @size-change="query4Size"
              @current-change="query4Num"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
}

</style>